<template>
	<view>
		<Header :title="dataTypeFlag==1?'切换会员卡':'切换用户'" :showBack="true" ></Header>
		<view class="container">
			<view class="ui-two-box">
				
				<view class="content">
					<block v-for="(item,index) in list" :key="index">
						<view @click="change(index)" :class="{'active':index==curIndex}" class="card">
							<view class="left-mode">
								<image src="../../static/userCode.png" mode=""></image>
								<view>
									<view>{{dataTypeFlag==1?'IC卡号：':''}}{{dataTypeFlag==2?item.ownerName:item.cardNo}}</view>
									<view style="font-size: 24rpx;">{{item.organizationName}}</view>
								</view>
							</view>
							<view class="right-mode">
								<image v-if="index==curIndex" src="@/static/img/checked_yes2.png" mode=""></image>
								<image v-else src="../../static/img/checked_no.png" mode=""></image>
							</view>
						</view>
					</block>
					<button class="btn" v-if="list.length>0" @click="summit" type="default">{{dataTypeFlag==2?'切换学生数据':'切换会员卡'}}</button>
					<view v-if="show" class="quesheng">
						您目前还没有绑定卡哦
					</view>
				</view>
			</view>	
		</view>	
		
	</view>
</template>

<script>
	import { decryptPhone } from '@/services/phoneDecryption.js'
	export default {
		data() {
			return {
				list:[],
				curIndex:-1,
				dataTypeFlag:uni.getStorageSync('info').dataTypeFlag,
				show:false
			}
		},
		onLoad() {
			this.getCardList()
		},
		methods: {
			getCardList(){
				this.$http('/minprogram/api/member/getOwnerMemberCardList',{
					condition:{
						dataTypeFlag:this.dataTypeFlag
					}
				},async res=>{
					if(res.data.items.length>0){
						this.list=res.data.items
						for (let item of this.list) {
						  item.ownerName = await decryptPhone(item.ownerName,this); 
						}
						for(let i = 0;i<this.list.length;i++){
							if(this.list[i].isDefault){
								this.curIndex = i
							}
						}
					}else{
						this.show = true
					}
					
					
					
				})
			},
			summit(){
				
				let url= this.dataTypeFlag==1?('/minprogram/api/member/setDefault?cardNo='+this.list[this.curIndex].cardNo):('/minprogram/api/member/setDefaultStudent?id='+this.list[this.curIndex].id)
				
				this.$http(url,{
				},res=>{
					if(res.data.value==true){
						uni.showToast({
							icon:'none',
							title:'切换成功'
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/index/index?type='+this.dataTypeFlag
							})
						},1200)
					}
				})
			},
			change(index){
				this.curIndex=index
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		width: 600upx;
		margin: 32upx auto;
	}
	.card{
		width: 600upx;
		// height: 88upx;
		background: #fff4e6;
		// background: rgba(255, 146, 0, .1);
		border-radius: 20upx;
		padding: 17upx 27upx;
		margin-bottom: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left-mode{
			display: flex;
			align-items: center;
			image{
				width: 60upx;
				height: 60upx;
				margin-right: 10upx;
				padding: 4upx;
				border-radius: 50%;
				background: #fff;
			}
			view{
				font-size: 28upx;
				font-weight: bold;
				color: #333;
				letter-spacing: 3upx;
			}
		}
		.right-mode{
			image{
				width: 30upx;
				height: 30upx;
			}
		}
	}
	
	.btn{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 10upx;
		// background: linear-gradient(180deg, #64B998 0%, #408F70 100%);
		background: linear-gradient(to right, #feb519, #ff9906, #ff9200);
		font-size: 26upx;
		color: #fff;
		z-index: 999;
		letter-spacing: 3upx;
		margin-top: 188upx;
	}
	
	.quesheng{
		text-align: center;
		font-size: 24upx;
		color: #999999;
		height: 300upx;
		line-height: 300upx;
	}
</style>
